<template lang="pug">
  .about
    .content-about
      .top
      .center
        .left
          ul
            li(v-for="d,i in list" @click="bnt(i)" :key="i" :class="{'active': (i==zindex)}") {{d}}
        .right
          Swiper(:options="swiperOptions" ref="mySwiper")
            SwiperSlide(v-for="d in setList")
              .box 
                img(:src="d.title")
                
                ul(v-for="item in d.items")
                  p {{item.name}}
                  li(v-for="jk in item.okList")
                    img(:src="jk.icon")
                    .tl
                      p {{jk.main}}
                      p ${{jk.price}}.00
                    
</template>
<script>

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
let c = null
export default {
  components:{
    Swiper,
    SwiperSlide
  },
  data(){
    return {
      list: ['推荐','小米手机','Redmi手机','游戏手机','电脑平板','智能穿戴','电视','大家电','小家电','智能家具','户外出行','日用百货','儿童用品','优品精选','小米服务'],
      swiperOptions:{
        direction: 'vertical',
        on:{
        slideChange(){
          c.zindex = this.activeIndex
        },
      },
      },
      zindex: 0,
      setList: [],
      ok: this
    }
  },
  computed:{
    swiper() {
        return this.$refs.mySwiper.$swiper
      }
  },
  methods:{
    bnt(i){
      this.zindex = i
      this.swiper.slideTo(i, 1000, false)
    },
    getList(){
      this.$http.get('/ajaxdata/erjic.json').then(({data})=>{
        this.setList = data.list
        console.log( this.setList )
      })
    }
  },
  created(){
    c = this
  },
  mounted () {
    this.getList()
    var startScroll, touchStart, touchCurrent;
    this.swiper.slides.on('touchstart', function (e) {
        startScroll = this.scrollTop;
        touchStart = e.targetTouches[0].pageY;
    }, true);
    this.swiper.slides.on('touchmove', function (e) {
        touchCurrent = e.targetTouches[0].pageY;
        var touchesDiff = touchCurrent - touchStart;
        var slide = this;
        var onlyScrolling =
                ( slide.scrollHeight > slide.offsetHeight ) && 
                (
                    ( touchesDiff < 0 && startScroll === 0 ) || 
                    ( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) || 
                    ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) ) 
                );
        if (onlyScrolling) {
            e.stopPropagation();
        }
    }, true);
  }
}
</script>
<style lang="sass" scoped>
.about
  width: 100%
  .top
    height: .5rem
    background: #000
  .center
    display: flex
    width: 100%
    height: calc( 100vh - .5rem )
    background: #ccc
    .left
      width: .79rem
      height: 100%
      overflow: hidden
      overflow-y: scroll
      li
        width: 100%
        line-height: .469rem
        text-align: center
        box-sizing: border-box
        font-size: .14rem
        background: #fff
        &.active
          color: #ff5934
    .right
      width: 3rem
      height: calc( 100vh - .5rem )
      background: #fff
      position: relative
      z-index: 0
      .swiper-container
        width: 100%
        height: calc( 100vh - .5rem )
        .swiper-slide 
          width: 100%
          height: calc( 100vh - .5rem )
          overflow: hidden
          overflow-y: scroll
        .box 
          width: 100%
          padding: .1rem
          img
            width: 100%
          ul
            width: 100%
            background: #fff
            li
              height: 1rem
              display: flex
              padding: .1rem
              img
                width: 30%
              .tl
                margin-left: .1rem
                p
                  line-height: .3rem

          

</style>
